<template>
    <div>
                <div class="model" v-show="model" @click="model = false">
                    <div class="model-show">
                        <img :src="modelSrc" alt="">
                    </div>
                </div>
        <h2 style="    font-weight: normal;">更换头像</h2>
        <div class="cut">
            <vue-cropper
                    ref="cropper"
                    :img="option.img"
                    :outputSize="option.outputSize"
                    :outputType="option.outputType"
                    :info="option.info"
                    :canScale="option.canScale"
                    :autoCrop="option.autoCrop"
                    :autoCropWidth="option.autoCropWidth"
                    :autoCropHeight="option.autoCropHeight"
                    :fixed="option.fixed"
                    :fixedNumber="option.fixedNumber"
                    :full="option.full"
                    :fixedBox="option.fixedBox"
                    :canMove="option.canMove"
                    :canMoveBox="option.canMoveBox"
                    :original="option.original"
                    :centerBox="option.centerBox"
                    :height="option.height"
                    :infoTrue="option.infoTrue"
                    :maxImgSize="option.maxImgSize"
                    :enlarge="option.enlarge"
                    :mode="option.mode"
                    @realTime="realTime"
                    @imgLoad="imgLoad">
            </vue-cropper>
        </div>
        <div style="margin: auto;width: 266px;">
            <label class="btn" for="uploads">上传</label>
            <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);"
                   accept="image/png, image/jpeg, image/gif, image/jpg"
                   @change="uploadImg($event, 1)">
            <el-button @click="rotateLeft" class="btn el-icon-refresh-left"></el-button>
            <button @click="uploadImgOss" class="btn">保存</button>
            <button @click="out()" class="btn">取消</button>
        </div>
        <div class="test-button" v-if="showSetting">
            <button @click="changeImg" class="btn">changeImg</button>
            <label class="btn" for="uploads">upload</label>
            <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);"
                   accept="image/png, image/jpeg, image/gif, image/jpg"
                   @change="uploadImg($event, 1)">
            <button @click="startCrop" v-if="!crap" class="btn">start</button>
            <button @click="stopCrop" v-else class="btn">stop</button>
            <button @click="clearCrop" class="btn">clear</button>
            <button @click="refreshCrop" class="btn">refresh</button>
            <button @click="changeScale(1)" class="btn">+</button>
            <button @click="changeScale(-1)" class="btn">-</button>
            <button @click="rotateLeft" class="btn">rotateLeft</button>
            <button @click="rotateRight" class="btn">rotateRight</button>
            <button @click="finish('base64')" class="btn">preview(base64)</button>
            <button @click="finish('blob')" class="btn">preview(blob)</button>
            <a @click="down('base64')" class="btn">download(base64)</a>
            <a @click="down('blob')" class="btn">download(blob)</a>
            <button @click="uploadImgOss" class="btn">uploadOss</button>
            <div style="display:block; width: 100%;" v-if="showSetting">
                <label class="c-item">
                    <span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
                    <input type="checkbox" v-model="option.original">
                    <span>original: {{ option.original}}</span>
                </label>
                <label class="c-item">
                    <span>能否拖动图片</span>
                    <input type="checkbox" v-model="option.canMove">
                </label>
                <label class="c-item">
                    <span>能否拖动截图框</span>
                    <input type="checkbox" v-model="option.canMoveBox">
                    <span>canMoveBox: {{ option.canMoveBox}}</span>
                </label>
                <label class="c-item">
                    <span>截图框固定大小</span>
                    <input type="checkbox" v-model="option.fixedBox">
                    <span>fixedBox: {{ option.fixedBox}}</span>
                </label>
                <label class="c-item">
                    <span>是否输出原图比例的截图</span>
                    <input type="checkbox" v-model="option.full">
                    <span>full: {{ option.full}}</span>
                </label>
                <label class="c-item">
                    <span>是否自动生成截图框</span>
                    <input type="checkbox" v-model="option.autoCrop">
                    <span>autoCrop: {{ option.autoCrop}}</span>
                </label>
                <label class="c-item">
                    <span>是否根据dpr生成适合屏幕的高清图片</span>
                    <input type="checkbox" v-model="option.high">
                    <span>high: {{ option.high}}</span>
                </label>
                <label class="c-item">
                    <span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
                    <input type="checkbox" v-model="option.centerBox">
                    <span>centerBox: {{ option.centerBox}}</span>
                </label>
                <label class="c-item">
                    <p>输出图片格式</p>
                    <label>jpg
                        <input type="radio" name="type" value="jpeg" v-model="option.outputType">
                    </label>
                    <label>png
                        <input type="radio" name="type" value="png" v-model="option.outputType">
                    </label>
                    <label>webp
                        <input type="radio" name="type" value="webp" v-model="option.outputType">
                    </label>
                </label>
            </div>
        </div>
        <!--        style="width:20px;height:20px;overflow:hidden;margin:5px"-->
<!--        <div class="show-preview" style="width:50px;height:50px;overflow:hidden;margin:5px">-->
<!--&lt;!&ndash;            <div :style="previews.div">&ndash;&gt;-->
<!--                <img :src="previews.url" :style="previews.img">-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--        </div>-->
    </div>

</template>
<script>
    import vueCropper from 'vue-cropper'
    import {mapState} from "vuex";
    import {getRequest} from "../../utils/api";
    import store from "../../store";
    // import { uploadOSS } from '@u/oss'

    export default {
        name: 'headerSetting',
        data() {
            return {
                showSetting: false,
                model: false,
                modelSrc: '',
                crap: false,
                previews: {},
                lists: [
                    {
                        img: 'https://qn-qn-kibey-static-cdn.app-echo.com/goodboy-weixin.PNG'
                    },
                    {
                        img: 'https://avatars2.githubusercontent.com/u/15681693?s=460&v=4'
                    }
                ],
                option: {
                    img: '',//剪切图片地址
                    size: 1,            //输出图片压缩比默认为1
                    full: false,        //输出截图是否缩放
                    outputType: 'jpg',  //输出图片格式
                    canMove: false,     //是否可以拖动图片
                    fixedBox: false,    //是否固定截图大小
                    original: true,     //上传图片按原始比例
                    canMoveBox: true,   //是否可以拖动截图框
                    autoCrop: true,     //是否自成截图框
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 150, //截图框宽
                    autoCropHeight: 150,//截图框高
                    centerBox: true,    //截图框能否超过图片
                    high: true,         //是否根据dpr输出高清图片
                    maxImgSize: 300,     //上传图片最大比例
                    fixed: true,         //固定截图框高宽比例
                },
                show: true,
                imgUrl: '',
                widthPercentage: 0,
                heightPercentage: 0,
            }
        },
        components: {
            'vue-cropper': vueCropper
        },
        watch: {
            "option.tabPosition": {
                handler(val) {
                    console.log(val)
                }
            }
        },
        computed: {
            ...mapState({
                loginServiceApi: state => state.loginServiceApi,
                fileUpload: state => state.fileUpload,
                user: state => state.user,
                headerSetting: state => state.headerSetting
            })
        },
        methods: {
            out(){
              store.commit("initHeaderSetting",false)
            },
            //更换图片
            changeImg() {
                this.option.img = this.lists[~~(Math.random() * this.lists.length)].img
            },
            // 自由截图
            startCrop() {
                // start
                this.crap = true
                this.$refs.cropper.startCrop()
            },
            //禁止自由截图
            stopCrop() {
                //  stop
                this.crap = false
                this.$refs.cropper.stopCrop()
            },
            //清除截图框
            clearCrop() {
                // clear
                this.$refs.cropper.clearCrop()
            },
            //重新加载图片
            refreshCrop() {
                // clear
                this.$refs.cropper.refresh()
            },
            //图片放大缩小 1 放大 | -1 缩小
            changeScale(num) {
                num = num || 1
                this.$refs.cropper.changeScale(num)
            },
            //图片向左旋转
            rotateLeft() {
                this.$refs.cropper.rotateLeft()
            },
            //图片向右旋转
            rotateRight() {
                this.$refs.cropper.rotateRight()
            },
            //转变图片格式
            finish(type) {
                // 输出
                // var test = window.open('about:blank')
                // test.document.body.innerHTML = '图片生成中..'
                //blob图片
                if (type === 'blob') {
                    this.$refs.cropper.getCropBlob((data) => {
                        var img = window.URL.createObjectURL(data)
                        this.model = true
                        this.modelSrc = img
                    })
                } else {
                    //base64格式图片
                    this.$refs.cropper.getCropData((data) => {
                        this.model = true
                        this.modelSrc = data
                    })
                }
            },
            // 实时预览函数
            realTime(data) {
                // console.log("heightPercentage => ",this.heightPercentage)
                console.log("data => ", data)
                let imgHt = data.img.height.replaceAll("\"", "").replaceAll("px", "")
                let imgWt = data.img.width.replaceAll("\"", "").replaceAll("px", "")
                let divWt = data.div.width.replaceAll("\"", "").replaceAll("px", "")
                let divHt = data.div.height.replaceAll("\"", "").replaceAll("px", "")
                if (imgHt != 0 && this.heightPercentage == 0) {
                    this.heightPercentage = imgHt / divHt;
                    this.widthPercentage = imgWt / divWt;
                    console.log("heightPercentage => ",this.heightPercentage)
                    console.log("widthPercentage => ",this.widthPercentage)
                }
                if (imgHt != 0) {
                    data.img.height = "" + divHt * this.heightPercentage + "px"
                    data.img.width = "" + divWt * this.widthPercentage + "px"
                }
                this.previews = data
                console.log(data)
            },

            finish2(type) {
                this.$refs.cropper2.getCropData((data) => {
                    this.model = true
                    this.modelSrc = data
                })
            },
            finish3(type) {
                this.$refs.cropper3.getCropData((data) => {
                    this.model = true
                    this.modelSrc = data
                })
            },
            //下载
            down(type) {
                // event.preventDefault()
                var aLink = document.createElement('a')
                aLink.download = 'demo'
                // 输出
                if (type === 'blob') {
                    this.$refs.cropper.getCropBlob((data) => {
                        this.downImg = window.URL.createObjectURL(data)
                        aLink.href = window.URL.createObjectURL(data)
                        aLink.click()
                    })
                } else {
                    this.$refs.cropper.getCropData((data) => {
                        this.downImg = data
                        aLink.href = data
                        aLink.click()
                    })
                }
            },
            //图片上传浏览器
            uploadImg(e, num) {
                //上传图片
                // this.option.img
                var file = e.target.files[0]
                if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                    alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
                    return false
                }
                var reader = new FileReader()
                reader.onload = (e) => {
                    let data
                    if (typeof e.target.result === 'object') {
                        // 把Array Buffer转化为blob 如果是base64不需要
                        data = window.URL.createObjectURL(new Blob([e.target.result]))
                    } else {
                        data = e.target.result
                    }
                    if (num === 1) {
                        this.option.img = data
                    } else if (num === 2) {
                        this.example2.img = data
                    }
                }
                // 转化为base64
                // reader.readAsDataURL(file)
                // 转化为blob
                reader.readAsArrayBuffer(file)
            },
            imgLoad(msg) {
                console.log('msg => ', msg)
            },
            //截图上传OSS
            uploadImgOss() {
                this.$refs.cropper.getCropData(data => {
                    //设置图片名称
                    let name = Math.floor(Math.random() * 1000000)
                    //将显示图片地址情况，防止重复上传
                    this.option.img = ''
                    //将裁剪的base64图片转换成file格式
                    let file = this.dataURLtoFile(data, name)
                    console.log(file)
                    let formData = new FormData();
                    formData.append("file",file)
                    this.postRequest(this.loginServiceApi+'/admin/userface',formData).then(res =>{
                        if (data) {
                                    getRequest(store.state.loginServiceApi + '/login/info').then(res2 => {
                                        if (res2.code = 200) {
                                            // 存入用户信息
                                            window.sessionStorage.setItem("user", JSON.stringify(res2.data))
                                            store.commit('initUser', res2.data);
                                            console.log("user =>", store.state.user)
                                            this.out()
                                            return;
                                        }
                                    })
                                }

                    })
                    //将图片上传到OSS
                    // this.uploadImage(file)
                })
            },
            //将base64转换为file格式
            dataURLtoFile(dataurl, filename) {
                //将base64转换为文件
                var arr = dataurl.split(','),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                return new File([u8arr], filename, {type: mime})
            },
            // 将裁剪完图片上传oss
            async uploadImage(event) {
                this.imgUrl = await uploadOSS(event, 0)
                console.log(this.imgUrl)
            },
        },
        mounted: function () {
            console.log(this.$refs.cropper)
        }
    }
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .cut {
        width: 300px;
        height: 300px;
        margin: 30px auto;
    }

    .c-item {
        max-width: 800px;
        margin: 10px auto;
        margin-top: 20px;
    }

    .content {
        margin: auto;
        max-width: 1200px;
        margin-bottom: 100px;
    }

    .test-button {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }

    .btn {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #c0ccda;
        color: #1f2d3d;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0px 10px 0px 0px;
        padding: 9px 15px;
        font-size: 14px;
        border-radius: 4px;
        color: #fff;
        background-color: #50bfff;
        border-color: #50bfff;
        transition: all .2s ease;
        text-decoration: none;
        user-select: none;
    }

    .des {
        line-height: 30px;
    }

    code.language-html {
        padding: 10px 20px;
        margin: 10px 0px;
        display: block;
        background-color: #333;
        color: #fff;
        overflow-x: auto;
        font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono;
        border-radius: 5px;
        white-space: pre;
    }

    .show-info {
        margin-bottom: 50px;
    }

    .show-info h2 {
        line-height: 50px;
    }

    /*.title, .title:hover, .title-focus, .title:visited {
      color: black;
    }*/

    .title {
        display: block;
        text-decoration: none;
        text-align: center;
        line-height: 1.5;
        margin: 20px 0px;
        background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
        color: transparent;
        -webkit-background-clip: text;
        background-size: 200% 100%;
        animation: slide 5s infinite linear;
        font-size: 40px;
    }

    .test {
        height: 500px;
    }

    .model {
        position: fixed;
        z-index: 10;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
    }

    .model-show {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
    }

    .model img {
        display: block;
        margin: auto;
        max-width: 80%;
        user-select: none;
        background-position: 0px 0px, 10px 10px;
        background-size: 20px 20px;
        background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
    }

    .c-item {
        display: block;
        user-select: none;
    }

    @keyframes slide {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -100% 0;
        }
    }

</style>